<!--
 * @Description:: 请补充填写
 * @Version: 1.0
 * @Author: 小白
 * @Date: 2022-04-14 14:26:46
 * @LastEditors: 小白
 * @LastEditTime: 2025-09-04 13:05:23
 * @FilePath: \tmsadmin\src\views\companies_advisory\components\table.vue
-->

<template>
  <el-table :data="props.tableData" v-loading="props.loading" style="width: 100%"
    :header-cell-style="{ background: '#FAFAFA', color: 'rgba(0,0,0,0.85)' }"
    :default-sort="{ prop: 'createTime', order: 'descending' }" @selection-change="handleSelectionChange">
    <template #empty>
      <div class="v2-table__empty-data v2-table__empty-border" style="width: 100%">
        <div class="v2-table__empty-default">
          <div style="padding-top: 40px; height: 50px">
            <i class="icon ion-ios-briefcase-outline" style="font-size: 60px" />
          </div>
          <span>暂无数据</span>
        </div>
      </div>
    </template>
    <el-table-column type="selection" fixed="left" align="center" width="50" />
    <el-table-column v-for="item in tableColumns" :key="item.id" :fixed="item.fixed" :prop="item.prop"
      :label="item.title" :min-width="item.minwidth" :sortable="item.sortable" :filters="item.filters"
      :align="item.align" :filter-method="item.filters && filterHandler" :show-overflow-tooltip="true">
      <template #default="scope">
        <template v-if="item.prop == 'actions'">

          <el-button size="small" type="primary" :disabled="scope.row.isPush == 1" @click="showEdit(scope.row)">
            编辑
          </el-button>
          <el-button size="small" type="danger" @click="showDelete(scope.row)">
            删除
          </el-button>
          <el-button size="small" type="warning" @click="push(scope.row)">
            {{ scope.row.isPush == 1 ? '取消发布' : '去发布' }}
          </el-button>
        </template>
        <template v-else-if="item.prop == 'index'">
          {{ scope.$index + 1 }}
        </template>
        <template v-else-if="item.prop == 'content'">
          <el-button type="primary" link @click="open(scope.row['content'])">查看</el-button>
        </template>
        <template v-else-if="item.prop == 'isPush'">
          <span v-if="scope.row[item.prop] == 1" style="color: green;">已发布</span>
          <span v-else style="color: red;">未发布</span>
        </template>
        <template v-else-if="item.prop == 'isTop'">
          <span v-if="scope.row[item.prop] == 1" style="color: green;">是</span>
          <span v-else style="color: red;">否</span>
        </template>
        <template v-else-if="item.prop == 'imgUrl'">
          <img :src="scope.row.imgUrl" width="100px" />
        </template>
        <template v-else>
          {{ scope.row[item.prop] }}
        </template>
      </template>
    </el-table-column>
  </el-table>
  <div class="pagination">
    <div style="line-height: 32px;">
    </div>
    <el-pagination v-model:current-page="props.pageNum" v-model:page-size="props.pageSize"
      :page-sizes="[10, 30, 50, 100]" :background="true" layout="sizes, prev, pager, next" :total="props.total"
      @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>
  <el-dialog
    v-model="dialogVisible"
    title="查看"
    width="500"
    :before-close="handleClose"
  >
    <div v-html="html" class="news_body" style="height: 60vh; overflow: auto"></div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">
          关闭
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { ElMessageBox, ElMessage } from 'element-plus'
import { REQUEST } from '@/api/request'
import { ref } from 'vue'
const emits = defineEmits(['change', 'edit', 'ok', 'selectionChange', 'remark'])
const props = defineProps({
  tableData: { type: Array, default: [] },
  tableColumns: { type: Array, default: [] },
  pageSize: { type: Number, default: 10 },
  pageNum: { type: Number, default: 1 },
  total: { type: Number, default: 0 },
  loading: { type: Boolean, default: false }
})
const handleSizeChange = (val: number) => {
  emits('change', {
    pageNum: props.pageNum,
    pageSize: val
  })
}
const dialogVisible = ref(false)
const html = ref('')
const handleClose = () => {
  dialogVisible.value = false
}
const open = (remark: any) => {
  dialogVisible.value = true
  html.value = remark
}
const handleCurrentChange = (val: number) => {
  emits('change', {
    pageNum: val,
    pageSize: props.pageSize
  })
}
const push = (row: any) => {
  ElMessageBox.confirm(`您将进行${row.isPush == 1 ? '取消发布' : '去发布'}操作，请确认`, '提示', {
    distinguishCancelAndClose: true,
    confirmButtonText: '确定',
    cancelButtonText: '取消'
  }).then(() => {
    console.log(row)

     REQUEST.POST('NEWSEDIT', {id: row.id, isPush: row.isPush == 1 ? 0 : 1 }).then((res: any) => {
          if (res.status === 200) {
            ElMessage({
              type: 'success',
              message: `${row.isPush == 1 ? '取消发布' : '发布'}成功`
            })
            emits('ok')
          } else {
            ElMessage({
              type: 'warning',
              message: res.message
            })
          }
        })
  })
}
const filterHandler = (value: any, row: any, column: any) => {
  const property = column.property
  return row[property] === value
}
const showEdit = (row: any) => {
  emits('edit', row)
}
const handleSelectionChange = (row: any) => {
  emits('selectionChange', row)
}
const showDelete = (row: any) => {
  ElMessageBox.confirm('您将进行删除操作，请确认', '提示', {
    distinguishCancelAndClose: true,
    confirmButtonText: '确定',
    cancelButtonText: '取消'
  }).then(() => {
    REQUEST.POST('NEWDEL', {
      ids: [`${row.id}`]
    }).then((res: any) => {
      if (res.status === 200) {
        ElMessage({
          type: 'success',
          message: '成功删除'
        })
        emits('ok')
      } else {
        ElMessage({
          type: 'warning',
          message: res.message
        })
      }
    })
  })
}
</script>

<style lang="scss" scoped>
.pagination {
  display: flex;
  justify-content: space-between;
  align-self: center;
  margin-top: 20px;
}
</style>
<style>
  .news_body img {
    width: 100%!important;
  }
</style>
